<template>
    <div class="register">
        <div class="box">
            <div class="head">
                <img src="../assets/images/undraw_decorative_friends_q2np.svg" alt="">
            </div>
            <div>
                <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="80px" :rules="rules">
                <el-form-item label="账号" prop="adminId">
                    <el-input v-model.trim="ruleForm.adminId" autocomplete="off"  clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="adminPassword">
                    <el-input type="password" v-model.trim="ruleForm.adminPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="adminCheckPassword">
                    <el-input type="password" v-model.trim="ruleForm.adminCheckPassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="adminName">
                    <el-input v-model.trim="ruleForm.adminName" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="warning" @click="register">注册</el-button>
                    <el-button type="primary" @click="toLogin">登录</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Register',
    data(){
        return {
           ruleForm:{
               adminId:'',
               adminPassword:'',
               adminCheckPassword:'',
               adminName:''
           },
           rules:{
                adminId:[
                    {required:true,message:'请输入注册账号',trigger:'blur'}
                ],  
                adminPassword:[
                    {required:true,message:'请输入注册密码',trigger:'blur'}
                ],
                adminCheckPassword:[
                     {required:true,message:'请再次输入密码',trigger:'blur'}
                ],
                adminName:[
                     {required:true,message:'请输入姓名',trigger:'blur'}
                ]
            }
        }
    },
    computed: {
      
    },
    methods:{
        toLogin:function(){//去登录界面
            this.$router.push('/login')
        },
        resetForm:function(){//重置注册信息
            this.$refs.ruleForm.resetFields();
        },
        register:function(){//注册
            let empty = this.ruleForm.adminId == "" || this.ruleForm.adminPassword ==""||
                        this.ruleForm.adminCheckPassword==""||this.ruleForm.adminName =="";
            if(empty){
                this.$message({
                    type:'error',
                    message:'输入信息不能为空！'
                })
            }
            else if(this.ruleForm.adminPassword!=this.ruleForm.adminCheckPassword){
                    this.$message({
                        type:'error',
                        message:'两次输入密码不一致！'
                    })
            }else{
                this.$axios.post('/admin/register',this.ruleForm)
                .then(res =>{
                    if(res.data.success){
                        this.$message({
                            type:'success',
                            message:`${res.data.msg}`
                        })
                        this.$router.push('/login')
                    }else{
                        this.$message({
                            type:'error',
                            message:`${res.data.msg}`
                        })
                    }
                })
                .catch(err =>{
                    this.$message({
                        type:'error',
                        message:`${err}`
                    })
                })
    
            }
        },
       
    }
}
</script>

<style scoped>
    .register{
        width:100%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        background-image: url('../assets/images/undraw_apartment_rent_o0ut.svg');
        background-size:100% 100%;
    }
    .register .box{
        width:450px;
        background:#D3DCE6;
        border-radius:5px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        box-shadow:0px 0px 5px #D3DCE6;
    }
    .register .box .head{
        width:120px;
        height:120px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius:50%;
        background:#D3DCE6;
        box-shadow:0px 0px 5px #eee;
        transform: translateY(-50%);
    }
    .register .box .head img{
        width:90%;
        height:90%;
        border-radius:50%;
        background:#fff;
    }
</style>